<template>
  <div class="paper-home-container">
    <!-- 顶部标题区域 -->
    <div class="header-section">
      <h1 class="main-title">论文首页（曾欣烨）</h1>
      <div class="subtitle">大数据论文管理系统</div>
    </div>

    <!-- 个人信息展示区 -->
    <el-card class="user-info-card" shadow="hover">
      <div slot="header" class="card-header">
        <span><i class="el-icon-user"></i> 个人信息</span>
      </div>
      <div class="user-info-content">
        <div class="user-avatar">
          <el-avatar :size="80" :src="userInfo.avatar"></el-avatar>
        </div>
        <div class="user-details">
          <div class="info-item">
            <span class="label">姓名：</span>
            <span class="value">{{ userInfo.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">学号：</span>
            <span class="value">{{ userInfo.studentId }}</span>
          </div>
          <div class="info-item">
            <span class="label">院系：</span>
            <span class="value">{{ userInfo.department }}</span>
          </div>
          <div class="info-item">
            <span class="label">专业：</span>
            <span class="value">{{ userInfo.major }}</span>
          </div>
          <div class="info-item">
            <span class="label">年级：</span>
            <span class="value">{{ userInfo.grade }}</span>
          </div>
          <div class="info-item">
            <span class="label">导师：</span>
            <span class="value">{{ userInfo.supervisor }}</span>
          </div>
          <div class="info-item">
            <span class="label">联系方式：</span>
            <span class="value">{{ userInfo.contact }}</span>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 毕业论文信息展示区 -->
    <el-card class="thesis-info-card" shadow="hover">
      <div slot="header" class="card-header">
        <span><i class="el-icon-document"></i> 毕业论文信息</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleEditThesis">编辑</el-button>
      </div>
      <div class="thesis-info-content">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="论文题目">{{ thesisInfo.title }}</el-descriptions-item>
          <el-descriptions-item label="论文类型">{{ thesisInfo.type }}</el-descriptions-item>
          <el-descriptions-item label="研究方向">{{ thesisInfo.researchDirection }}</el-descriptions-item>
          <el-descriptions-item label="开题时间">{{ thesisInfo.proposalDate }}</el-descriptions-item>
          <el-descriptions-item label="中期检查时间">{{ thesisInfo.midtermDate }}</el-descriptions-item>
          <el-descriptions-item label="预答辩时间">{{ thesisInfo.preDefenseDate }}</el-descriptions-item>
          <el-descriptions-item label="答辩时间">{{ thesisInfo.defenseDate }}</el-descriptions-item>
          <el-descriptions-item label="当前状态">
            <el-tag :type="getStatusType(thesisInfo.status)">{{ thesisInfo.status }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-card>

    <!-- 论文成果介绍区 -->
    <el-card class="paper-achievements-card" shadow="hover">
      <div slot="header" class="card-header">
        <span><i class="el-icon-trophy"></i> 论文成果介绍</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="handleEditAchievements">编辑</el-button>
      </div>
      <div class="achievements-content">
        <div class="achievement-section">
          <h3 class="section-title">研究背景与意义</h3>
          <p class="section-content">{{ achievements.background }}</p>
        </div>
        
        <div class="achievement-section">
          <h3 class="section-title">主要创新点</h3>
          <ul class="innovation-list">
            <li v-for="(innovation, index) in achievements.innovations" :key="index" class="innovation-item">
              {{ innovation }}
            </li>
          </ul>
        </div>
        
        <div class="achievement-section">
          <h3 class="section-title">研究成果</h3>
          <div class="research-results">
            <div v-for="(result, index) in achievements.results" :key="index" class="result-item">
              <h4>{{ result.title }}</h4>
              <p>{{ result.description }}</p>
              <el-tag size="small" :type="result.type === '期刊' ? 'success' : 'primary'">{{ result.type }}</el-tag>
            </div>
          </div>
        </div>
        
        <div class="achievement-section">
          <h3 class="section-title">应用前景</h3>
          <p class="section-content">{{ achievements.application }}</p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'PaperHomeZxy',
  data() {
    return {
      // 个人信息
      userInfo: {
        name: '曾欣烨',
        studentId: '20210056',
        department: '计算机科学与技术学院',
        major: '大数据技术与应用',
        grade: '2021级',
        supervisor: '李教授',
        contact: 'zengxy@example.com',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      },
      // 毕业论文信息
      thesisInfo: {
        title: '基于机器学习的智能推荐系统设计与实现',
        type: '应用研究',
        researchDirection: '大数据分析与智能推荐',
        proposalDate: '2023-09-15',
        midtermDate: '2024-01-20',
        preDefenseDate: '2024-04-10',
        defenseDate: '2024-05-20',
        status: '已完成'
      },
      // 论文成果介绍
      achievements: {
        background: '随着互联网的快速发展，用户面临信息过载的问题日益严重。智能推荐系统作为解决信息过载问题的有效手段，已成为各大互联网平台的核心技术。本研究旨在设计并实现一种基于机器学习的智能推荐系统，通过分析用户行为和偏好，为用户提供个性化的推荐服务，提高用户体验和平台粘性。',
        innovations: [
          '提出了一种融合多种机器学习算法的混合推荐模型，有效解决了单一算法的局限性',
          '设计了一种动态权重调整机制，能够根据用户行为变化实时调整推荐策略',
          '引入了知识图谱技术，提高了推荐结果的可解释性和准确性',
          '开发了基于深度学习的用户兴趣演化模型，能够捕捉用户兴趣的长期变化趋势'
        ],
        results: [
          {
            title: '基于混合机器学习的推荐算法研究',
            description: '提出了一种融合协同过滤和内容推荐的混合算法，在公开数据集上的推荐准确率提高了15%。',
            type: '期刊'
          },
          {
            title: '智能推荐系统中的用户行为分析',
            description: '分析了用户在不同场景下的行为模式，为推荐策略的优化提供了理论依据。',
            type: '会议'
          },
          {
            title: '基于深度学习的推荐系统设计与实现',
            description: '设计并实现了一个完整的推荐系统原型，并在实际环境中进行了测试验证。',
            type: '期刊'
          }
        ],
        application: '本研究成果可广泛应用于电商、视频、音乐、新闻等多个领域的推荐系统，能够显著提高用户体验和平台运营效率。同时，研究成果对于推动人工智能技术在个性化服务领域的应用具有重要意义。'
      }
    }
  },
  methods: {
    // 获取状态类型
    getStatusType(status) {
      const statusMap = {
        '已完成': 'success',
        '进行中': 'warning',
        '未开始': 'info',
        '已延期': 'danger'
      }
      return statusMap[status] || 'info'
    },
    // 编辑论文信息
    handleEditThesis() {
      this.$message({
        message: '编辑论文信息功能开发中...',
        type: 'info'
      })
    },
    // 编辑成果介绍
    handleEditAchievements() {
      this.$message({
        message: '编辑成果介绍功能开发中...',
        type: 'info'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.paper-home-container {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 84px);
}

.header-section {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px 0;
  background: linear-gradient(135deg, #9c27b0, #673ab7);
  color: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

  .main-title {
    font-size: 32px;
    margin: 0;
    font-weight: bold;
    letter-spacing: 2px;
  }

  .subtitle {
    font-size: 16px;
    margin-top: 10px;
    opacity: 0.9;
  }
}

.user-info-card,
.thesis-info-card,
.paper-achievements-card {
  margin-bottom: 20px;
  border-radius: 8px;
}

.card-header {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  
  i {
    margin-right: 8px;
    color: #9c27b0;
  }
}

.user-info-content {
  display: flex;
  align-items: center;
  
  .user-avatar {
    margin-right: 30px;
  }
  
  .user-details {
    flex: 1;
    
    .info-item {
      margin-bottom: 12px;
      font-size: 14px;
      
      .label {
        display: inline-block;
        width: 100px;
        color: #666;
        font-weight: bold;
      }
      
      .value {
        color: #333;
      }
    }
  }
}

.thesis-info-content {
  .el-descriptions {
    .el-descriptions__label {
      font-weight: bold;
    }
  }
}

.achievements-content {
  .achievement-section {
    margin-bottom: 25px;
    
    .section-title {
      font-size: 18px;
      font-weight: bold;
      color: #9c27b0;
      margin-bottom: 15px;
      border-left: 4px solid #9c27b0;
      padding-left: 10px;
    }
    
    .section-content {
      line-height: 1.8;
      color: #333;
      font-size: 14px;
      text-indent: 2em;
    }
    
    .innovation-list {
      padding-left: 20px;
      
      .innovation-item {
        margin-bottom: 10px;
        line-height: 1.6;
        color: #333;
        font-size: 14px;
      }
    }
    
    .research-results {
      .result-item {
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f9f9f9;
        border-radius: 6px;
        border-left: 3px solid #9c27b0;
        
        h4 {
          margin: 0 0 10px 0;
          color: #333;
          font-size: 16px;
        }
        
        p {
          margin: 0 0 10px 0;
          color: #666;
          font-size: 14px;
          line-height: 1.6;
        }
      }
    }
  }
}
</style>